<template>
    <div class = "navigationone">
        <el-container>
            <el-container>
           <el-menu>
            <el-card class="box-card">
               <div class = "title" res = 'title'>
                 <p>首页主导航</p>  
               </div>
               <div class = "newly-wrapper" ref = "newly">
                   <el-button @click = "newly" type="primary">新增</el-button>
               </div>
               <template>
                <el-table
                    :data="tableData"
                    border
                    style="width:100%"
                    :style="{height:Height}">
                    <el-table-column
                    fixed
                    label="图片"
                    align="center"
                    width="100">
                    <div class = "cell">
                        <img src="../../assets/icon/icon.png" alt="">
                    </div>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="名称"
                    align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button @click="Delete(scope.row)"  type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                </template>
            </el-card>
                <el-dialog
                    title="新增导航"
                    :visible.sync="dialogVisible"
                    width="30%"
                    >
                    <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="名称" prop="pass">
                        <el-input  v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="研学资讯" value="研学资讯"></el-option>
                        <el-option label="研学基地" value="研学基地"></el-option>
                        <el-option label="研学旅行" value="研学旅行"></el-option>
                        <el-option label="管理中心" value="管理中心"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="确认密码" prop="checkPass">
                        <el-input  v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button v-if = "Numberr === 2" type="primary" @click="submitFormONE('ruleForm')">提交</el-button>
                        <el-button v-if = "Numberr === 1" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                    </el-form>
                    <!-- <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span> -->
                    </el-dialog>
            </el-menu>
    </el-container>
    </el-container>
    </div>
</template>
<script>
export default {
    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else {
      //     callback();
      //   }
      // };
        return{
        tableData: [{
          name: '研学资讯',
          zip: 200333
        }, {
          name: '研学基地',
          zip: 200333
        }, {
          name: '研学旅行',
          zip: 200333
        }, {
          name: '管理中心',
          zip: 200333
        }],
         dialogVisible: false,
         ruleForm: {
          pass: '',
          index:null,
          region:''
          // checkPass: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          // checkPass: [
          //   { validator: validatePass2, trigger: 'blur' }
          // ],
        },
        Numberr:1,
        }
    },
    computed: {
      Height(){
        let a = document.documentElement.clientHeight
        let b = 60 + 61 + 40 + 70 + 160 
        let abc = a - b + 'px'
        return abc
      }
    },
    methods: {
      open1(item) {
        this.$notify({
          title: '成功',
          message: item,
          type: 'success'
        });
      },
      Delete(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData = this.tableData.filter(item => item !== row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
      handleClick(row,index) {
        let b = this.$store.state.amount
        this.Numberr = 2
          this.dialogVisible = true
          this.ruleForm.pass = row.name
          this.ruleForm.index = index
      },
      newly(){
        this.Numberr = 1
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
        this.dialogVisible = true
      },
      submitFormONE(formName){
      this.$refs[formName].validate((valid) => {
              if (valid) {
                this.tableData[this.ruleForm.index].name = this.ruleForm.pass
                this.open1('修改成功')
                this.dialogVisible = false
              } else {
                console.log('error submit!!');
                return false;
              }
            });
      },
       submitForm(formName) {
        let List = {
            name:''
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            List.name = this.ruleForm.pass
            this.tableData = [List,...this.tableData]
            this.open1('添加成功')
            this.dialogVisible = false
            this.$refs[formName].resetFields();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>
<style scoped>
    .navigationone{
        width:100%;
    }
    .el-menu{
        width:100%;
        padding: 20px;
    }
    .navigationone .el-table .cell{
        width: 90px;
        text-align: center;
    }
    .navigationone .el-table .cell img{
        width:100%;
    }
    .navigationone .newly-wrapper{
        padding:15px 0;
    }
</style>